<template>
  <div class="loan-application-page">
    <!-- Header -->
    <header class="page-header">
      <div class="container">
        <div class="header-content">
          <div class="header-left">
            <button @click="navigateBack" class="btn-back">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 12H5M12 19l-7-7 7-7"/>
              </svg>
              返回
            </button>
            <div class="header-info">
              <h1>贷款申请</h1>
              <p>申请银行贷款服务</p>
            </div>
          </div>
          <div class="header-right">
            <div class="application-status" v-if="applicationId">
              <span class="status-label">申请状态:</span>
              <span class="status-badge" :class="getStatusClass(applicationForm.status)">
                {{ getStatusText(applicationForm.status) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="page-main">
      <div class="container">
        <div class="application-container">
          <!-- Application Form -->
          <div class="application-form-card">
            <form @submit.prevent="handleSubmit" class="application-form">
              <div class="form-header">
                <h2>贷款申请信息</h2>
                <p>请填写完整的贷款申请信息</p>
              </div>

              <!-- Customer Selection -->
              <div class="form-section">
                <h3>申请人信息</h3>
                <div class="form-group">
                  <label for="customer_id">申请客户 <span class="required">*</span></label>
                  <select 
                    id="customer_id" 
                    v-model="applicationForm.customer_id" 
                    required
                    :class="{ 'error': errors.customer_id }"
                  >
                    <option value="" disabled>请选择申请客户</option>
                    <option v-for="customer in customers" :key="customer.customer_id" :value="customer.customer_id">
                      {{ customer.first_name }} {{ customer.last_name }} - {{ customer.phone }}
                    </option>
                  </select>
                  <div v-if="errors.customer_id" class="error-message">{{ errors.customer_id }}</div>
                </div>
              </div>

              <!-- Loan Type Selection -->
              <div class="form-section">
                <h3>贷款类型选择</h3>
                <div class="loan-types-grid">
                  <div 
                    v-for="loanType in loanTypes" 
                    :key="loanType.loan_type_id"
                    class="loan-type-card"
                    :class="{ 'selected': applicationForm.loan_type_id === loanType.loan_type_id }"
                    @click="selectLoanType(loanType.loan_type_id)"
                  >
                    <div class="loan-type-icon">
                      {{ getLoanTypeIcon(loanType.type_name) }}
                    </div>
                    <div class="loan-type-info">
                      <h4>{{ loanType.type_name }}</h4>
                      <p>{{ loanType.description }}</p>
                      <div class="loan-type-features">
                        <div class="feature">
                          <span class="feature-label">利率:</span>
                          <span class="feature-value">{{ loanType.interest_rate }}%</span>
                        </div>
                        <div class="feature">
                          <span class="feature-label">最大金额:</span>
                          <span class="feature-value">¥{{ formatCurrency(loanType.max_amount) }}</span>
                        </div>
                        <div class="feature">
                          <span class="feature-label">最长期限:</span>
                          <span class="feature-value">{{ loanType.max_term }}个月</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="errors.loan_type_id" class="error-message">{{ errors.loan_type_id }}</div>
              </div>

              <!-- Loan Details -->
              <div class="form-section">
                <h3>贷款详情</h3>
                <div class="form-row">
                  <div class="form-group">
                    <label for="requested_amount">申请金额 (¥) <span class="required">*</span></label>
                    <div class="input-with-prefix">
                      <span class="input-prefix">¥</span>
                      <input 
                        type="number" 
                        id="requested_amount" 
                        v-model="applicationForm.requested_amount" 
                        step="0.01" 
                        min="1000"
                        required
                        :class="{ 'error': errors.requested_amount }"
                        placeholder="请输入申请金额"
                      />
                    </div>
                    <div v-if="errors.requested_amount" class="error-message">{{ errors.requested_amount }}</div>
                    <div v-if="selectedLoanType" class="field-hint">
                      最大可申请金额: ¥{{ formatCurrency(selectedLoanType.max_amount) }}
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="requested_term">申请期限 (月) <span class="required">*</span></label>
                    <div class="input-with-suffix">
                      <input 
                        type="number" 
                        id="requested_term" 
                        v-model="applicationForm.requested_term" 
                        min="1"
                        required
                        :class="{ 'error': errors.requested_term }"
                        placeholder="请输入申请期限"
                      />
                      <span class="input-suffix">个月</span>
                    </div>
                    <div v-if="errors.requested_term" class="error-message">{{ errors.requested_term }}</div>
                    <div v-if="selectedLoanType" class="field-hint">
                      最长期限: {{ selectedLoanType.max_term }}个月
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="purpose">贷款用途</label>
                  <select 
                    id="purpose" 
                    v-model="applicationForm.purpose" 
                    :class="{ 'error': errors.purpose }"
                  >
                    <option value="" disabled>请选择贷款用途</option>
                    <option v-for="purpose in loanPurposes" :key="purpose" :value="purpose">{{ purpose }}</option>
                  </select>
                  <div v-if="errors.purpose" class="error-message">{{ errors.purpose }}</div>
                </div>
              </div>

              <!-- Financial Information -->
              <div class="form-section">
                <h3>财务信息</h3>
                <div class="form-row">
                  <div class="form-group">
                    <label for="monthly_income">月收入 (¥)</label>
                    <div class="input-with-prefix">
                      <span class="input-prefix">¥</span>
                      <input 
                        type="number" 
                        id="monthly_income" 
                        v-model="applicationForm.monthly_income" 
                        step="0.01" 
                        min="0"
                        :class="{ 'error': errors.monthly_income }"
                        placeholder="请输入月收入"
                      />
                    </div>
                    <div v-if="errors.monthly_income" class="error-message">{{ errors.monthly_income }}</div>
                  </div>

                  <div class="form-group">
                    <label for="monthly_expenses">月支出 (¥)</label>
                    <div class="input-with-prefix">
                      <span class="input-prefix">¥</span>
                      <input 
                        type="number" 
                        id="monthly_expenses" 
                        v-model="applicationForm.monthly_expenses" 
                        step="0.01" 
                        min="0"
                        :class="{ 'error': errors.monthly_expenses }"
                        placeholder="请输入月支出"
                      />
                    </div>
                    <div v-if="errors.monthly_expenses" class="error-message">{{ errors.monthly_expenses }}</div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="credit_score">信用评分</label>
                  <input 
                    type="number" 
                    id="credit_score" 
                    v-model="applicationForm.credit_score" 
                    min="300" 
                    max="850"
                    :class="{ 'error': errors.credit_score }"
                    placeholder="请输入信用评分 (300-850)"
                  />
                  <div v-if="errors.credit_score" class="error-message">{{ errors.credit_score }}</div>
                  <div class="field-hint">信用评分范围: 300-850，分数越高越好</div>
                </div>
              </div>

              <!-- Loan Calculation Preview -->
              <div class="form-section" v-if="applicationForm.requested_amount && applicationForm.requested_term && selectedLoanType">
                <h3>贷款预览</h3>
                <div class="loan-preview">
                  <div class="preview-item">
                    <span class="preview-label">申请金额:</span>
                    <span class="preview-value">¥{{ formatCurrency(applicationForm.requested_amount) }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="preview-label">贷款期限:</span>
                    <span class="preview-value">{{ applicationForm.requested_term }}个月</span>
                  </div>
                  <div class="preview-item">
                    <span class="preview-label">年利率:</span>
                    <span class="preview-value">{{ selectedLoanType.interest_rate }}%</span>
                  </div>
                  <div class="preview-item">
                    <span class="preview-label">预计月还款:</span>
                    <span class="preview-value highlight">¥{{ formatCurrency(calculateMonthlyPayment()) }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="preview-label">总还款金额:</span>
                    <span class="preview-value">¥{{ formatCurrency(calculateTotalPayment()) }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="preview-label">总利息:</span>
                    <span class="preview-value">¥{{ formatCurrency(calculateTotalInterest()) }}</span>
                  </div>
                </div>
              </div>

              <!-- Form Actions -->
              <div class="form-actions">
                <button type="button" class="btn-reset" @click="resetForm">
                  重置表单
                </button>
                <button 
                  type="submit" 
                  class="btn-submit"
                  :disabled="!canSubmit || isSubmitting"
                >
                  <span v-if="isSubmitting" class="loading-spinner"></span>
                  {{ isSubmitting ? '提交中...' : '提交申请' }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </main>

    <!-- Success Modal -->
    <div class="modal" v-if="showSuccessModal">
      <div class="modal-content success-modal">
        <div class="modal-header">
          <h2>申请提交成功</h2>
          <button class="modal-close" @click="showSuccessModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <div class="success-icon">✓</div>
          <p>您的贷款申请已成功提交！</p>
          <div class="application-info">
            <div class="info-item">
              <span class="info-label">申请编号:</span>
              <span class="info-value">{{ submittedApplicationId }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">申请状态:</span>
              <span class="info-value">待审核</span>
            </div>
            <div class="info-item">
              <span class="info-label">申请金额:</span>
              <span class="info-value">¥{{ formatCurrency(applicationForm.requested_amount) }}</span>
            </div>
          </div>
          <p class="success-note">我们将在1-3个工作日内处理您的申请，请耐心等待。</p>
          
          <div class="form-actions">
            <button type="button" class="btn-confirm" @click="closeSuccessModal">
              确定
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Overlay -->
    <div class="modal-overlay" v-if="showSuccessModal" @click="showSuccessModal = false"></div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';

// 响应式数据
const applicationId = ref(null);
const isSubmitting = ref(false);
const showSuccessModal = ref(false);
const submittedApplicationId = ref('');

// 表单数据
const applicationForm = reactive({
  customer_id: '',
  loan_type_id: '',
  requested_amount: '',
  requested_term: '',
  purpose: '',
  credit_score: '',
  monthly_income: '',
  monthly_expenses: '',
  status: 'Pending'
});

// 错误信息
const errors = reactive({});

// 模拟数据
const customers = ref([
  {
    customer_id: 1,
    first_name: '张',
    last_name: '三',
    phone: '138****1234',
    email: 'zhangsan@example.com'
  },
  {
    customer_id: 2,
    first_name: '李',
    last_name: '四',
    phone: '139****5678',
    email: 'lisi@example.com'
  },
  {
    customer_id: 3,
    first_name: '王',
    last_name: '五',
    phone: '136****9012',
    email: 'wangwu@example.com'
  },
  {
    customer_id: 4,
    first_name: '赵',
    last_name: '六',
    phone: '137****3456',
    email: 'zhaoliu@example.com'
  }
]);

const loanTypes = ref([
  {
    loan_type_id: 1,
    type_name: '个人消费贷款',
    description: '用于个人消费支出的贷款产品',
    interest_rate: 8.5,
    max_amount: 500000,
    max_term: 60
  },
  {
    loan_type_id: 2,
    type_name: '房屋抵押贷款',
    description: '以房产作为抵押的贷款产品',
    interest_rate: 5.2,
    max_amount: 5000000,
    max_term: 360
  },
  {
    loan_type_id: 3,
    type_name: '汽车贷款',
    description: '专门用于购买汽车的贷款产品',
    interest_rate: 6.8,
    max_amount: 1000000,
    max_term: 60
  },
  {
    loan_type_id: 4,
    type_name: '经营贷款',
    description: '用于个体工商户或小微企业经营的贷款',
    interest_rate: 7.5,
    max_amount: 2000000,
    max_term: 120
  },
  {
    loan_type_id: 5,
    type_name: '教育贷款',
    description: '用于教育支出的专项贷款产品',
    interest_rate: 4.8,
    max_amount: 300000,
    max_term: 120
  }
]);

const loanPurposes = [
  '个人消费',
  '购买汽车',
  '房屋装修',
  '教育支出',
  '医疗支出',
  '旅游度假',
  '婚庆支出',
  '创业投资',
  '债务整合',
  '其他用途'
];

// 计算属性
const selectedLoanType = computed(() => {
  return loanTypes.value.find(t => t.loan_type_id === parseInt(applicationForm.loan_type_id));
});

const canSubmit = computed(() => {
  return applicationForm.customer_id && 
         applicationForm.loan_type_id && 
         applicationForm.requested_amount && 
         applicationForm.requested_term;
});

// 方法
function selectLoanType(loanTypeId) {
  applicationForm.loan_type_id = loanTypeId;
  errors.loan_type_id = '';
}

function validateForm() {
  errors.value = {};

  if (!applicationForm.customer_id) {
    errors.customer_id = '请选择申请客户';
    return false;
  }

  if (!applicationForm.loan_type_id) {
    errors.loan_type_id = '请选择贷款类型';
    return false;
  }

  if (!applicationForm.requested_amount) {
    errors.requested_amount = '请输入申请金额';
    return false;
  } else if (parseFloat(applicationForm.requested_amount) < 1000) {
    errors.requested_amount = '申请金额不能少于1000元';
    return false;
  } else if (selectedLoanType.value && parseFloat(applicationForm.requested_amount) > selectedLoanType.value.max_amount) {
    errors.requested_amount = `申请金额不能超过 ¥${formatCurrency(selectedLoanType.value.max_amount)}`;
    return false;
  }

  if (!applicationForm.requested_term) {
    errors.requested_term = '请输入申请期限';
    return false;
  } else if (parseInt(applicationForm.requested_term) < 1) {
    errors.requested_term = '申请期限不能少于1个月';
    return false;
  } else if (selectedLoanType.value && parseInt(applicationForm.requested_term) > selectedLoanType.value.max_term) {
    errors.requested_term = `申请期限不能超过${selectedLoanType.value.max_term}个月`;
    return false;
  }

  if (applicationForm.credit_score && (parseInt(applicationForm.credit_score) < 300 || parseInt(applicationForm.credit_score) > 850)) {
    errors.credit_score = '信用评分必须在300-850之间';
    return false;
  }

  if (applicationForm.monthly_income && parseFloat(applicationForm.monthly_income) < 0) {
    errors.monthly_income = '月收入不能为负数';
    return false;
  }

  if (applicationForm.monthly_expenses && parseFloat(applicationForm.monthly_expenses) < 0) {
    errors.monthly_expenses = '月支出不能为负数';
    return false;
  }

  return true;
}

async function handleSubmit() {
  if (!validateForm()) {
    return;
  }

  isSubmitting.value = true;

  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    console.log('提交贷款申请:', applicationForm);
    
    // 模拟生成申请ID
    submittedApplicationId.value = `LOAN${Date.now()}`;
    showSuccessModal.value = true;
    
  } catch (error) {
    console.error('提交申请失败:', error);
    alert('提交申请失败，请重试');
  } finally {
    isSubmitting.value = false;
  }
}

function resetForm() {
  Object.keys(applicationForm).forEach(key => {
    if (key === 'status') {
      applicationForm[key] = 'Pending';
    } else {
      applicationForm[key] = '';
    }
  });
  errors.value = {};
}

function closeSuccessModal() {
  showSuccessModal.value = false;
  resetForm();
}

function navigateBack() {
  console.log('返回上一页');
}

function getLoanTypeIcon(typeName) {
  const icons = {
    '个人消费贷款': '🛍️',
    '房屋抵押贷款': '🏠',
    '汽车贷款': '🚗',
    '经营贷款': '💼',
    '教育贷款': '🎓'
  };
  return icons[typeName] || '💰';
}

function getStatusClass(status) {
  const classes = {
    'Pending': 'status-pending',
    'Approved': 'status-approved',
    'Rejected': 'status-rejected'
  };
  return classes[status] || 'status-pending';
}

function getStatusText(status) {
  const texts = {
    'Pending': '待审核',
    'Approved': '已批准',
    'Rejected': '已拒绝'
  };
  return texts[status] || '待审核';
}

function formatCurrency(value) {
  if (!value) return '0.00';
  return new Intl.NumberFormat('zh-CN', {
    style: 'decimal',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value);
}

// 贷款计算方法
function calculateMonthlyPayment() {
  if (!applicationForm.requested_amount || !applicationForm.requested_term || !selectedLoanType.value) {
    return 0;
  }
  
  const principal = parseFloat(applicationForm.requested_amount);
  const monthlyRate = selectedLoanType.value.interest_rate / 100 / 12;
  const numPayments = parseInt(applicationForm.requested_term);
  
  if (monthlyRate === 0) {
    return principal / numPayments;
  }
  
  const monthlyPayment = principal * (monthlyRate * Math.pow(1 + monthlyRate, numPayments)) / 
                        (Math.pow(1 + monthlyRate, numPayments) - 1);
  
  return monthlyPayment;
}

function calculateTotalPayment() {
  return calculateMonthlyPayment() * parseInt(applicationForm.requested_term || 0);
}

function calculateTotalInterest() {
  return calculateTotalPayment() - parseFloat(applicationForm.requested_amount || 0);
}

// 组件挂载时的初始化
onMounted(() => {
  console.log('贷款申请页面已加载');
});
</script>

<style scoped>
/* Modern Page Styles */
.loan-application-page {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1f2937;
  background-color: #f9fafb;
  min-height: 100vh;
}

.page-header {
  background-color: #fff;
  padding: 1.5rem 0;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 10;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
}

.btn-back {
  background: none;
  border: none;
  font-size: 1rem;
  color: #4b5563;
  cursor: pointer;
  margin-right: 1.5rem;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.btn-back:hover {
  color: #1f2937;
}

.header-info h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: #111827;
}

.header-info p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0.25rem 0 0 0;
}

.header-right {
  display: flex;
  align-items: center;
}

.application-status {
  display: flex;
  align-items: center;
  background-color: #f3f4f6;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
}

.status-label {
  font-size: 0.875rem;
  color: #4b5563;
  margin-right: 0.5rem;
}

.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
}

.status-pending {
  background-color: #f59e0b;
}

.status-approved {
  background-color: #10b981;
}

.status-rejected {
  background-color: #ef4444;
}

.page-main {
  padding: 2rem 0;
}

.application-container {
  display: flex;
  justify-content: center;
}

.application-form-card {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 2rem;
  width: 100%;
  max-width: 900px;
}

.application-form {
  display: flex;
  flex-direction: column;
}

.form-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.form-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e40af;
  margin: 0 0 0.5rem 0;
}

.form-header p {
  color: #6b7280;
  margin: 0;
}

.form-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e5e7eb;
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 1.5rem 0;
  display: flex;
  align-items: center;
}

.form-section h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1rem;
  background-color: #3b82f6;
  margin-right: 0.5rem;
  border-radius: 2px;
}

.form-row {
  display: flex;
  gap: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
  width: 100%;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #4b5563;
  font-size: 0.875rem;
}

.required {
  color: #ef4444;
  margin-left: 0.25rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #1f2937;
  transition: all 0.2s;
  background-color: #fff;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #60a5fa;
  outline: none;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.input-with-prefix,
.input-with-suffix {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  overflow: hidden;
  transition: all 0.2s;
}

.input-with-prefix:focus-within,
.input-with-suffix:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.input-prefix,
.input-suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  background-color: #f3f4f6;
  color: #6b7280;
  font-weight: 500;
  font-size: 0.875rem;
}

.input-with-prefix input,
.input-with-suffix input {
  border: none;
  flex: 1;
  padding: 0.75rem;
  font-size: 0.875rem;
  color: #1f2937;
}

.input-with-prefix input:focus,
.input-with-suffix input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

.field-hint {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.5rem;
}

.error-message {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

.form-group input.error,
.form-group select.error,
.input-with-prefix.error,
.input-with-suffix.error {
  border-color: #ef4444;
}

/* Loan Type Grid Styles */
.loan-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.loan-type-card {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.loan-type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.loan-type-card.selected {
  border-color: #3b82f6;
  background-color: #f0f7ff;
}

.loan-type-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #3b82f6;
  text-align: center;
}

.loan-type-info {
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.loan-type-info h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

.loan-type-info p {
  color: #6b7280;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  flex: 1;
}

.loan-type-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.75rem;
  margin-top: auto;
}

.feature {
  display: flex;
  flex-direction: column;
  background-color: #f3f4f6;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.feature-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.feature-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
}

/* Form Actions */
.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.btn-reset,
.btn-submit {
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s;
  cursor: pointer;
}

.btn-reset {
  background-color: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
}

.btn-reset:hover {
  background-color: #e5e7eb;
}

.btn-submit {
  background-color: #3b82f6;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-submit:hover {
  background-color: #2563eb;
}

.btn-submit:disabled {
  background-color: #93c5fd;
  cursor: not-allowed;
}

.btn-submit .spinner {
  margin-right: 0.5rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Success Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
}

.modal-content {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  text-align: center;
}

.success-icon {
  background-color: #ecfdf5;
  color: #10b981;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.modal-message {
  color: #6b7280;
  margin-bottom: 1.5rem;
}

.application-id {
  background-color: #f3f4f6;
  padding: 0.75rem;
  border-radius: 0.375rem;
  font-family: monospace;
  font-size: 1rem;
  color: #1f2937;
  margin-bottom: 1.5rem;
}

.btn-confirm {
  background-color: #3b82f6;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-confirm:hover {
  background-color: #2563eb;
}

/* Responsive Design */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .loan-types-grid {
    grid-template-columns: 1fr;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .header-right {
    width: 100%;
  }

  .form-actions {
    flex-direction: column;
    gap: 1rem;
  }

  .btn-reset,
  .btn-submit,
  .btn-confirm {
    width: 100%;
  }
  
  .application-form-card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .application-form-card {
    padding: 1.25rem;
  }
  
  .loan-type-features {
    grid-template-columns: 1fr;
  }
}
</style>


